import React, { useEffect, useMemo, useRef, useState } from 'react'
import {useStr} from "../../../utils/timeStr"
// const myStr='背景介绍'

 function Intorduce() {
    let [str,]=useState('背景介绍')
    let [str1,]=useState('在为某公司检测后台页面时，你发现了一个上传页面，该页面做了一些防护，你需要尝试绕过并上传webshell，以获得网站根目录访问权限')
    let [str2,]=useState('实训目标')
    let [str3,]=useState('1、熟悉常见中间件存在的解析漏洞；')
    let [str4,]=useState('2、熟悉一句话木马的使用与制作')
    let [str5,]=useState('3、熟悉常见的上传漏洞利用方法')
    let [str6,]=useState('解题方向')
    let [str7,]=useState('1、试探允许上传的文件类型')
    let [str8,]=useState('2、观察服务器在处理完上传任务后返回的内容，获取上传途径')
    let [str9,]=useState('3、尝试修改上传路径，观察服务器是否允许写入权限')
      const spanRef=useRef()
      const spanRef1=useRef()
      const spanRef2=useRef()
      const spanRef3=useRef()
      const spanRef4=useRef()
      const spanRef5=useRef()
      const spanRef6=useRef()
      const spanRef7=useRef()
      const spanRef8=useRef()
      const spanRef9=useRef()
      useEffect(()=>{
       useStr(str,spanRef.current)
       
    //    console.log(useStr(str,spanRef.current));
        useStr(str1,spanRef1.current)
        useStr(str2,spanRef2.current)
        useStr(str3,spanRef3.current)
        useStr(str4,spanRef4.current)
        useStr(str5,spanRef5.current)
        useStr(str6,spanRef6.current)
        useStr(str7,spanRef7.current)
        useStr(str8,spanRef8.current)
        useStr(str9,spanRef9.current)
      })
     
    return (
        <div className="introduce">
            <div className="text-wrapper_28 flex-row">
                <span ref={spanRef} className="text_29"></span>
            </div>


            <div className="text-wrapper_29 flex-row">
                <span className="text_30" ref={spanRef1}>
                    
                </span>
            </div>
            <div className="text-wrapper_30 flex-row">
                <span className="text_31" ref={spanRef2}></span>
            </div>
            <div className="box_29 flex-row">
                <div className="text-group_28 flex-col justify-between">
                    <span className="text_32" ref={spanRef3}></span>
                    <span className="text_33" ref={spanRef4}></span>
                    <span className="text_34" ref={spanRef5}></span>
                </div>
            </div>
            <div className="text-wrapper_31 flex-row">
                <span className="text_35" ref={spanRef6}></span>
            </div>
            <div className="box_30 flex-row">
                <div className="text-group_29 flex-col justify-between">
                    <span className="text_36" ref={spanRef7}></span>
                    <span className="text_37" ref={spanRef8}></span>
                    <span className="text_38" ref={spanRef9}></span>
                </div>
            </div>
        </div>

    )
}
export default  React.memo(Intorduce);